<!doctype html>
<script src="../../../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../../polymer.html">
<dom-module id="test-element">
  <template>
    <style>
      :host {
        display: block;
        font-size: var(--test-element-font-size, 12px);
      }
    </style>
    test-element
  </template>
  <script>
    Polymer({
      is: 'test-element'
    });
  </script>
</dom-module>

<style is="custom-style">
  .c {
    --test-element-font-size: 32px;
  }
</style>
<test-element class="c"></test-element>
<test-element></test-element>
</body>
